<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>截屏插件测试页面</title>
    <style>
        body {
            font-family: 'Microsoft YaHei', sans-serif;
            margin: 0;
            padding: 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: white;
            min-height: 100vh;
        }
        
        .container {
            max-width: 800px;
            margin: 0 auto;
            background: rgba(255, 255, 255, 0.1);
            padding: 30px;
            border-radius: 15px;
            backdrop-filter: blur(10px);
        }
        
        h1 {
            text-align: center;
            margin-bottom: 30px;
            font-size: 2.5em;
            text-shadow: 0 2px 4px rgba(0,0,0,0.3);
        }
        
        .test-section {
            margin: 20px 0;
            padding: 20px;
            background: rgba(255, 255, 255, 0.1);
            border-radius: 10px;
            border-left: 4px solid #ff6b6b;
        }
        
        .test-section h2 {
            margin-top: 0;
            color: #ff6b6b;
        }
        
        .color-block {
            display: flex;
            gap: 10px;
            margin: 15px 0;
            flex-wrap: wrap;
        }
        
        .color-item {
            width: 100px;
            height: 100px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-weight: bold;
            color: white;
            text-shadow: 0 1px 2px rgba(0,0,0,0.5);
        }
        
        .red { background: linear-gradient(45deg, #ff6b6b, #ee5a24); }
        .blue { background: linear-gradient(45deg, #4ecdc4, #44a08d); }
        .green { background: linear-gradient(45deg, #45b7d1, #96c93d); }
        .purple { background: linear-gradient(45deg, #a8e6cf, #dcedc1); }
        .orange { background: linear-gradient(45deg, #ffd93d, #ff6b6b); }
        
        .text-content {
            line-height: 1.6;
            margin: 20px 0;
        }
        
        .highlight {
            background: rgba(255, 255, 255, 0.2);
            padding: 10px;
            border-radius: 5px;
            margin: 10px 0;
        }
        
        .button {
            background: linear-gradient(45deg, #ff6b6b, #ee5a24);
            color: white;
            border: none;
            padding: 12px 24px;
            border-radius: 25px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.3s ease;
            margin: 10px;
        }
        
        .button:hover {
            transform: translateY(-2px);
            box-shadow: 0 4px 15px rgba(0,0,0,0.3);
        }
        
        .instructions {
            background: rgba(255, 255, 255, 0.15);
            padding: 20px;
            border-radius: 10px;
            margin: 20px 0;
            border-left: 4px solid #4ecdc4;
        }
        
        .instructions h3 {
            margin-top: 0;
            color: #4ecdc4;
        }
        
        .instructions ol {
            margin: 10px 0;
            padding-left: 20px;
        }
        
        .instructions li {
            margin: 8px 0;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>📸 截屏插件测试页面</h1>
        
        <div class="instructions">
            <h3>🔧 测试步骤</h3>
            <ol>
                <li>确保已安装截屏插件</li>
                <li>点击浏览器工具栏中的插件图标</li>
                <li>在弹出的窗口中点击"截取当前页面"按钮</li>
                <li>检查下载文件夹中的截屏文件</li>
            </ol>
        </div>
        
        <div class="test-section">
            <h2>🎨 颜色测试区域</h2>
            <p>这个区域包含多种颜色，用于测试截屏的色彩还原效果：</p>
            <div class="color-block">
                <div class="color-item red">红色</div>
                <div class="color-item blue">蓝色</div>
                <div class="color-item green">绿色</div>
                <div class="color-item purple">紫色</div>
                <div class="color-item orange">橙色</div>
            </div>
        </div>
        
        <div class="test-section">
            <h2>📝 文本测试区域</h2>
            <div class="text-content">
                <p>这是一个用于测试截屏功能的页面。页面包含多种元素，包括：</p>
                <ul>
                    <li>不同颜色的背景</li>
                    <li>各种字体大小的文本</li>
                    <li>渐变效果</li>
                    <li>圆角边框</li>
                    <li>阴影效果</li>
                </ul>
                <div class="highlight">
                    <strong>重要提示：</strong> 这个高亮区域用于测试截屏时的文本清晰度。
                </div>
            </div>
        </div>
        
        <div class="test-section">
            <h2>🔘 交互元素测试</h2>
            <p>测试按钮在截屏中的显示效果：</p>
            <button class="button">测试按钮 1</button>
            <button class="button">测试按钮 2</button>
            <button class="button">测试按钮 3</button>
        </div>
        
        <div class="test-section">
            <h2>📊 数据展示测试</h2>
            <p>模拟一些数据展示内容：</p>
            <div style="display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0;">
                <div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
                    <h3>数据 1</h3>
                    <p style="font-size: 2em; margin: 10px 0;">123</p>
                    <p>测试数值</p>
                </div>
                <div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
                    <h3>数据 2</h3>
                    <p style="font-size: 2em; margin: 10px 0;">456</p>
                    <p>测试数值</p>
                </div>
                <div style="background: rgba(255,255,255,0.1); padding: 15px; border-radius: 8px; text-align: center;">
                    <h3>数据 3</h3>
                    <p style="font-size: 2em; margin: 10px 0;">789</p>
                    <p>测试数值</p>
                </div>
            </div>
        </div>
        
        <div class="test-section">
            <h2>📱 响应式测试</h2>
            <p>这个页面在不同屏幕尺寸下的显示效果：</p>
            <div class="highlight">
                <strong>当前视窗尺寸：</strong> <span id="viewport-size"></span>
            </div>
            <p>调整浏览器窗口大小，然后截屏测试响应式效果。</p>
        </div>
    </div>
    
    <script>
        // 显示当前视窗尺寸
        function updateViewportSize() {
            const size = `${window.innerWidth} × ${window.innerHeight}`;
            document.getElementById('viewport-size').textContent = size;
        }
        
        // 页面加载时更新尺寸
        updateViewportSize();
        
        // 窗口大小改变时更新尺寸
        window.addEventListener('resize', updateViewportSize);
        
        // 添加一些交互效果
        document.querySelectorAll('.button').forEach(button => {
            button.addEventListener('click', function() {
                this.style.transform = 'scale(0.95)';
                setTimeout(() => {
                    this.style.transform = '';
                }, 150);
            });
        });
    </script>
</body>
</html>